<template>
  <div class="songSheetLayout">
    <SongListClassification />
    <SongSheetPage
      ref="songSheetPage"
      v-if="songSheetObj"
      :songSheetObj="songSheetObj"
      :contnetPage="pageNum"
      :pagelimit="pagelimit"
      @getSongListContent="getSongListContent"
    />
  </div>
</template>

<script>
import { SongListContent } from "@/api";
import SongListClassification from "@/views/SongSheet/SongListClassification.vue";
import SongSheetPage from "@/views/SongSheet/SongSheetPage.vue";
export default {
  data() {
    return {
      pageNum: 1,
      songSheetObj: null,
      pagelimit: 35,
    };
  },
  components: {
    SongListClassification,
    SongSheetPage,
  },
  created() {
    this.getSongListContent();
  },
  methods: {
    getSongListContent(num) {
      if (num) this.pageNum = num;
      SongListContent({
        limit: this.pagelimit,
        offset: (this.pageNum - 1) * this.pagelimit,
        cat: this.$route.query.cat,
      }).then((res) => {
        // console.log(res);
        this.songSheetObj = res;
      });
    },
  },
  beforeRouteUpdate(to, from, next) {
    next();
    this.pageNum = 1;
    this.$refs.songSheetPage.contnetPage = 1;
    this.getSongListContent();
  },
};
</script>

<style lang="scss" scoped>
.songSheetLayout {
  width: 980px;
  min-height: 700px;
  border-left: 1px solid #d3d3d3;
  border-right: 1px solid #d3d3d3;
  margin: auto;
  padding: 40px;
  box-sizing: border-box;
}
</style>